<template>
  <!-- questions-choice.vue 专用组件 -->
  <div class="container">
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="70%">
      <!-- 1.题目类型 -->
      <div class="type">
        <el-row>
          <el-col :span="6"
            >【题型】：{{ dataList.questionType | formatQT }}</el-col
          >
          <el-col :span="6">【编号】：{{ dataList.id }}</el-col>
          <el-col :span="6"
            >【难度】：{{ dataList.difficulty | formatDfct }}</el-col
          >
          <el-col :span="6">【标签】：{{ dataList.tags || "" }}</el-col>
        </el-row>
        <el-row class="secLine">
          <el-col :span="6">【学科】：{{ dataList.subjectName }}</el-col>
          <el-col :span="6">【目录】：{{ dataList.catalogID }}</el-col>
          <el-col :span="6">【方向】：{{ dataList.direction }}</el-col>
        </el-row>
      </div>
      <!-- 2.题干 -->
      <div class="subject">
        【题干】：
        <span class="question" v-html="dataList.question"></span>
        <p>
          {{ dataList.questionType | formatQT }}题
          选项：（以下选中的选项为正确答案）
        </p>
        <el-checkbox
          style="display:block;padding:3px"
          v-for="item in dataList.options"
          :key="item.id"
          v-model="item.isRight === 1"
          >{{ item.code }}
        </el-checkbox>
      </div>
      <!-- 3.参考答案 -->
      <div class="answer">
        【参考答案】：
        <el-button type="danger" @click="showVideo = true"
          >视频答案预览</el-button
        >
        <div v-if="showVideo" class="videoDIV">
          <video controls="controls" class="video" :src="dataList.videoURL">
            <!-- 解决 GET https://v-cdn.zjol.com.cn/276984.mp4 403 (Forbidden) -->
            <meta name="referrer" content="never" />
          </video>
        </div>
      </div>
      <!-- 4.答案解析 -->
      <div class="analysis">
        【答案解析】：<span v-html="dataList.answer"></span>
      </div>
      <!-- 5.题目备注 -->
      <div style="paddingTop:10px">【题目备注】：{{ dataList.remarks }}</div>
      <!-- 底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">
          关 闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from "@/api/hmmm/questions.js";
import { questionType, difficulty } from "@/api/hmmm/constants.js";

export default {
  data() {
    return {
      dialogVisible: false,
      showVideo: false,
      dataList: {}
    };
  },
  filters: {
    formatQT(qt) {
      // console.log(this.questionType);
      const temp = questionType.find(item => item.value == qt);
      return temp ? temp.label : "";
    },
    formatDfct(dfct) {
      const temp = difficulty.find(item => item.value == dfct);
      return temp ? temp.label : "";
    }
  },
  methods: {
    async showDialog(row) {
      console.log(row);
      this.dialogVisible = true;
      const { data } = await detail({ ...row, id: row.id });
      console.log(data);
      this.dataList = data;
    },
    close() {
      this.dialogVisible = false;
      this.showVideo = false;
    }
  }
};
</script>

<style scoped>
body {
  font-size: 14px;
}
.secLine {
  padding-top: 10px;
}

.question {
  color: blue;
}
.videoDIV {
  width: 60%;
  height: 60%;
}
.video {
  width: 100%;
  height: 100%;
}
.dialog-footer {
  text-align: right;
}

.type,
.subject,
.answer,
.analysis {
  padding: 8px 0;
  border-bottom: 1px solid #000;
}
</style>
